<script setup>
import { ref } from 'vue';
import { onPullDownRefresh,onShow } from '@dcloudio/uni-app'
	const bookList = ref([])
	const getBookList = async ()=>{
		uni.showLoading({
			title:'数据加载中...'
		})
		const res = await uni.request({
			method:'GET',
			url:'https://hmajax.itheima.net/api/books',
			data:{creator:'小七'}
		})
		bookList.value = res.data.data
		uni.hideLoading()
	}
	onShow(()=>{
		getBookList()
	})
	onPullDownRefresh(async ()=>{
		await getBookList()
		uni.stopPullDownRefresh()
	})
</script>

<template>
	<navigator url="/pages/book-add/book-add">
		<button class="add-book-button" type="primary">新增图书</button>
	</navigator>
	<view class="book-list">
		<view class="book-item row" v-for="item in bookList" :key="item.id">
			<image class="book-cover" src="../../static/cover.png" mode=""></image>
			<view class="book-info column">
				<text class="book-name">书名：{{item.bookname}}</text>
				<text class="book-author">作者：{{item.author}}</text>
				<text class="book-publisher">出版社：{{item.publisher}}</text>
				<view class="book-options row">
					<button class="book-options-button" type="primary" size="mini">查看</button>
					<button class="book-options-button" type="warn" size="mini">删除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.add-book-button{
		background-color: $uni-color-primary;
		margin: 20rpx;
	}
	.book-list{
		.book-item{
			padding: 20rpx;
			&:not(:last-child){
				border-bottom: 1rpx solid #f60;
			}
		}
		.book-cover{
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
		}
		.book-options{
			margin-top: auto;
		}
		.book-options-button{
			margin: 0;
			margin-right: 20rpx;
		}
	}
</style>
